import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'umi'
import NavDetail from '@/components/NavBar'
import { Grid } from 'antd-mobile'
import './index.scss'
import { fetchItem } from '@/api/home'
import Item from './item'
export default function index() {
  const navigate = useNavigate()
  const location: any = useLocation()
  // console.log(location);
  const title = location.state.name
  const [activeObject, setActive] = useState({
    orderActive: 0, // 0表示销售 1表示价格 2表示新品
    upDown: 0 // 0表示升序 1 表示降序
  })
  // 改变orderActive
  const changeOrder = (num: number) => {
    setActive({
      ...activeObject,
      orderActive: num
    })
  }
  const changeupDown = () => {
    if (activeObject.orderActive !== 1) {
      activeObject.orderActive = 1
      activeObject.upDown = 0
    } else {
      if (activeObject.upDown === 0) {
        activeObject.upDown = 1
      } else {
        activeObject.upDown = 0
      }
    }

    setActive({
      ...activeObject
    })

  }
  // 根据不同的orderActive upDown 判断 orederBy的值
  const [items, setItems] = useState([])
  const getItems = (order: string) => {
    fetchItem({
      orderBy: order
    }).then(res => {
      console.log(res);
      if (res.data.code === 0) {
        setItems(res.data.data.result)
      }
    })
  }
  const panduan = () => {
    let orderZhi = 'ordersUp'
    switch (activeObject.orderActive) {
      case 0:
        orderZhi = 'ordersUp'
        break
      case 1:
        if (activeObject.upDown === 0) {
          orderZhi = 'priceUp'
        } else {
          orderZhi = 'priceDown'
        }
        break
      case 2:
        orderZhi = 'addedUp'
        break
    }
    console.log(orderZhi);

    getItems(orderZhi)
  }
  // 点击商品进入商品闲情页面，并携带id
  const toCateDetail = (id: number) => {
    navigate(`/itemDetail?itemId=${id}`)
  }
  useEffect(() => {
    panduan()
  }, [activeObject])
  return (
    <>
      < NavDetail title={title} />
      <div className='detailMain'>
        <div className='detailGrid'>
          <Grid columns={3} gap={12}>
            <Grid.Item>
              <div className={`listName ${activeObject.orderActive === 0 ? 'active' : ''}`} onClick={
                () => {
                  changeOrder(0)
                }
              } >
                销量
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={`listName ${activeObject.orderActive === 1 ? 'active' : ''}`} onClick={
                changeupDown
              } >
                价格
                <span className={`span1 ${activeObject.orderActive === 1 && activeObject.upDown === 0 ? 'active' : ''}`}
                ></span>
                <span className={`span2 ${activeObject.orderActive === 1 && activeObject.upDown === 1 ? 'active' : ''}`}></span>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className={`listName ${activeObject.orderActive === 2 ? 'active' : ''}`} onClick={
                () => {
                  changeOrder(2)
                }
              } >
                新品
              </div>
            </Grid.Item>
          </Grid>
        </div>
        <div className='detailItems'>
          <Item itemsinger={items} toCateDetail={toCateDetail} fn2={() => {

          }} />
        </div>

      </div>
    </>
  )

}


